{% extends "admin/base.html" %}

{% block title %}班级管理{% endblock %}

{% block content %}
<div class="flex flex-col md:flex-row items-center justify-between mb-8 gap-4">
    <!-- 搜索栏 -->
    <form id="classSearchForm" action="/admin/class/search" method="GET" class="relative w-full md:w-1/2 lg:w-1/3">
        <input
            type="text"
            name="keyword"
            placeholder="搜索班级名称/编号"
            class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-200 focus:border-primary focus:ring-2 focus:ring-primary/20 text-sm"
            aria-label="班级搜索"
            value="{{ search_keyword }}"
            id="classKeyword"
        >
        <button
            type="submit"
            class="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-primary focus:outline-none bg-transparent p-0 m-0 transition-colors"
        >
            <i class="fa fa-search"></i>
        </button>
    </form>

    <!-- 新增班级按钮 -->
    <button class="bg-primary hover:bg-primary/90 text-white px-6 py-2 rounded-lg transition-colors flex items-center justify-center" id="addClassBtn">
        <i class="fa fa-plus mr-2"></i> 新增班级
    </button>
</div>
{#{{ search_keyword }}#}
{% if search_keyword %}
<div class="bg-blue-50 border-l-4 border-blue-400 p-4 mb-4">
    <p class="text-sm text-blue-700">
        <i class="fa fa-search mr-2"></i>搜索结果："{{ search_keyword }}"（共 {{ classes|length }} 条记录）
    </p>
</div>
{% endif %}



<div class="bg-white rounded-lg shadow-md p-6">
    <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
                <tr>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">班级编号</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">班级名称</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">所属专业</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">年级</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">班主任</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">学生人数</th>
                    <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                </tr>
            </thead>
            <tbody id="classTableBody">
                {% for class_item in classes %}
                <tr data-class-id="{{ class_item.id }}" class="hover:bg-gray-50 transition-colors">
                    <td class="px-6 py-4 text-sm text-gray-900">{{ class_item.id }}</td>
                    <td class="px-6 py-4 text-sm text-gray-900">{{ class_item.class_name }}</td>
                    <td class="px-6 py-4 text-sm text-gray-900">{{ class_item.major }}</td>
                    <td class="px-6 py-4 text-sm text-gray-900">{{ class_item.grade }}</td>
                    <td class="px-6 py-4 text-sm text-gray-900">
                        {% if class_item.advisor %}{{ class_item.advisor.username }}{% else %}<span class="text-gray-400">未指定</span>{% endif %}
                    </td>
                    <td class="px-6 py-4 text-sm text-gray-900">{{ class_item.students|length if class_item.students else 0 }}</td>
                    <td class="px-6 py-4 text-right">
                        <button class="text-primary hover:text-primary/80 mr-2 edit-class-btn">
                            <i class="fa fa-pen-alt mr-1"></i> 编辑
                        </button>
                        <button class="text-red-500 hover:text-red-700 delete-class-btn">
                            <i class="fa fa-trash-alt mr-1"></i> 删除
                        </button>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

    {% if not classes %}
    <div class="p-12 text-center">
        <div class="mb-6">
            <i class="fa fa-users text-4xl text-primary/10 animate-spin"></i>
        </div>
        <h3 class="text-lg font-bold text-gray-800 mb-2">暂无班级记录</h3>
        <p class="text-gray-500 mb-6">点击「新增班级」按钮创建新班级</p>
        <button class="bg-primary hover:bg-primary/90 text-white px-6 py-2 rounded-lg transition-colors" id="addClassBtn">
            <i class="fa fa-plus mr-2"></i> 新增班级
        </button>
    </div>
    {% endif %}
</div>

<!-- 班级管理模态框 -->
<div id="classModal" class="fixed inset-0 flex items-center justify-center z-50 bg-black/50 opacity-0 pointer-events-none transition-opacity duration-300">
    <div class="bg-white rounded-2xl shadow-2xl w-full max-w-4xl p-6 md:p-8 transform scale-95 transition-transform duration-300" id="classModalContent">
        <button class="absolute top-4 right-4 w-8 h-8 flex items-center justify-center rounded-full bg-gray-100 hover:bg-gray-200 transition-colors" id="closeClassModal">
            <i class="fa fa-times text-gray-500"></i>
        </button>

        <div class="flex items-center mb-6">
            <div id="classModalIcon" class="w-10 h-10 rounded-xl bg-blue-100 flex items-center justify-center mr-3">
                <i class="fa fa-graduation-cap text-blue-500"></i>
            </div>
            <h2 class="text-xl font-bold text-gray-800" id="classModalTitle">新增班级</h2>
        </div>

        <form id="classForm" class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <input type="hidden" id="classId" name="id">

            <!-- 基础信息卡片 -->
            <div class="bg-gray-50 rounded-xl p-5 space-y-4 w-full md:col-span-1">
                <h3 class="text-sm font-semibold text-gray-700 mb-3 flex items-center">
                    <i class="fa fa-info-circle text-gray-500 mr-2"></i> 班级基础信息
                </h3>

                <!-- 班级名称 -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1" for="className">班级名称</label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                            <i class="fa fa-users"></i>
                        </span>
                        <input type="text" id="className" name="class_name" class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-200 focus:border-primary focus:ring-2 focus:ring-primary/20" required>
                    </div>
                </div>

                <!-- 所属专业 -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1" for="classMajor">所属专业</label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                            <i class="fa fa-book"></i>
                        </span>
                        <input type="text" id="classMajor" name="major" class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-200 focus:border-primary focus:ring-2 focus:ring-primary/20" required>
                    </div>
                </div>

                <!-- 年级 -->
             <!-- 原年级下拉框改为文本框 -->
<div>
    <label class="block text-sm font-medium text-gray-700 mb-1" for="grade">年级</label>
    <div class="relative">
        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
            <i class="fa fa-calendar"></i>
        </span>
        <input type="number" id="grade" name="grade" min="1" max="6"
               class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-200 focus:border-primary focus:ring-2 focus:ring-primary/20"
               required placeholder="请输入年级">
    </div>
</div>




            </div>

            <!-- 班主任信息卡片 -->
            <div class="bg-gray-50 rounded-xl p-5 space-y-4 w-full md:col-span-1">
                <h3 class="text-sm font-semibold text-gray-700 mb-3 flex items-center">
                    <i class="fa fa-chalkboard-teacher text-gray-500 mr-2"></i> 班主任信息
                </h3>

                <!-- 班主任 -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1" for="headTeacherId">班主任</label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                            <i class="fa fa-user"></i>
                        </span>
                        <select id="headTeacherId" name="advisor_id" class="w-full pl-10 pr-10 py-3 rounded-lg border border-gray-200 focus:border-primary focus:ring-2 focus:ring-primary/20" required>
                            <option value="">请选择教师</option>
                        </select>
                    </div>
                </div>

                <!-- 班长 -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1" for="classMonitor">班长</label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                            <i class="fa fa-user-graduate"></i>
                        </span>
                        <select id="classMonitor" name="monitor_id" class="w-full pl-10 pr-10 py-3 rounded-lg border border-gray-200 focus:border-primary focus:ring-2 focus:ring-primary/20">
                            <option value="">不指定</option>
                        </select>
                    </div>
                </div>

                <!-- 班级简介 -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1" for="classDescription">班级简介</label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                            <i class="fa fa-file-alt"></i>
                        </span>
                        <textarea id="classDescription" name="description" rows="3" class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-200 focus:border-primary focus:ring-2 focus:ring-primary/20"></textarea>
                    </div>
                </div>
            </div>

            <!-- 操作按钮 -->
            <div class="w-full flex items-center justify-end pt-4 space-x-4 md:col-span-2">
                <button type="button" class="px-5 py-2.5 bg-white border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50" id="cancelClassBtn">
                    <i class="fa fa-times mr-1"></i> 取消
                </button>
                <button type="button" id="saveClassBtn" class="px-5 py-2.5 bg-primary text-white rounded-lg hover:bg-primary/90 shadow-md hover:shadow-lg">
                    <i class="fa fa-check mr-1"></i> 保存
                </button>
            </div>
        </form>
    </div>
</div>

<!-- 删除确认模态框 -->
<div id="deleteClassModal" class="fixed inset-0 flex items-center justify-center z-50 bg-black/50 opacity-0 pointer-events-none transition-opacity duration-300">
    <div class="bg-white rounded-xl shadow-xl w-full max-w-md p-6 md:p-8 transform scale-95 transition-transform duration-300" id="deleteClassModalContent">
        <div class="text-center mb-6">
            <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-red-100 mb-4">
                <i class="fa fa-trash-alt text-2xl text-red-500"></i>
            </div>
            <h3 class="text-xl font-bold text-gray-800 mb-2">确认删除班级</h3>
            <p class="text-gray-600" id="deleteClassName">你确定要删除班级 "XX班" 吗？</p>
            <p class="text-sm text-red-500 mt-2">删除后，该班级的学生将不会被删除，但会失去班级关联。</p>
        </div>
        <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
            <button type="button" id="cancelDeleteBtn" class="px-6 py-3 bg-white border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 w-full sm:w-auto">
                <i class="fa fa-times mr-1"></i> 取消
            </button>
            <button type="button" id="confirmDeleteBtn" class="px-6 py-3 bg-red-500 text-white rounded-lg hover:bg-red-600 shadow-md hover:shadow-lg w-full sm:w-auto">
                <i class="fa fa-trash-alt mr-1"></i> 确认删除
            </button>
        </div>
    </div>
</div>

<!-- 引入班级管理JS -->
<script src="{{ url_for('static', filename='js/admin_js/admin_class.js') }}"></script>
{% endblock %}